<template>
    <div class="success">
        <div>
            <img
                v-if="showBool"
                class="success_img"
                src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/12/07/05c4de6945d04341bf00098db8e661a6.png"
                alt=""
            />
            <div v-if="showBool">
                <button
                    class="buttonGo"
					@click="to_benefitCard()"
                >
                    点击查询权益
                </button>
            </div>
        </div>
        <div v-if="showBool">
            <div>权益卡激活成功，您可通过企业微信</div>
            <div style="margin-top: 3px">
                联系十蜂健康客服了解更详细的权益信息。
            </div>
        </div>
        <div class="hotlines" v-if="!showBool">
            <div>十蜂健康客服热线：4008-596-598</div>
            <div class="card_bg">
                <div class="card">
					<!-- https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/12/07/c4971f8531884901b2fe0f38ad81140e.png  淑英-->
                   <img
                        @touchstart="start"
                        class="card_img"
                        src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/12/07/89ddc2213d77470ea9eb9a522c6c56cd.png"
                        alt=""
                    />
                </div>
            </div>
            <div class="card_t">长按二维码 添加企业微信</div>
            <div class="card_t">开启权益</div>
        </div>
        <div class="toast" v-if="showToast" @click="close">
            <div class="toast-content">
                <div class="toast-msg">{{ toastMsg.message }}</div>
                <div class="toast-tips" v-if="toastMsg.tips">
                    <img src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/12/07/8696c88dc6db4862931a1b83f04f9202.png" alt="" />
                    <span>{{ toastMsg.tips }}</span>
                </div>
                <div class="close-icon">
                    <img src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/12/07/b836f18cde3344d8b62639e54b14a112.png" alt="" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
	import {
		baseUrl
	} from "@/config/tendIdConfig.js";
export default {
    name: "mySuccess",
    data() {
        return {
			toastMsg:{},
            showToast: false,
            showBool: false,
            cardnum:'WH23F-688760D5A5A9490'
        };
    },
	onLoad(option) {
		// this.cardnum = option.cardnum;
		 this.getNote(this.cardnum)
	},
    methods: {
		to_benefitCard(){
			uni.navigateTo({
				url: `/pages_card/benefitCard/index`
			})
		},
        getNote() {
			const token = this.$store.getters?.customer_token || uni.getStorageSync("customer_token")
			const that = this;
			uni.request({
			   url: baseUrl + `/customer/equityCardInfo/web/open/cardNumInquiryInterestCardAttention/${that.cardnum}`,
			    method: "GET",
				header: {
					Authorization: token
				},
			    success(res) {
					if (res.data.code == 200 && res.data.data) {
						console.log(res.data.data, "成功");
						that.handleShowToast({
							message: res.data.data,
							tips: "注意以上提示！",
						});
					}
			    },
			});
        },
        //请求响应后如果有报错信息调用这个方法弹窗提示。
        handleShowToast(params) {
			console.log(params,'///')
            this.showToast = true;
            this.toastMsg = params;
        },
        close() {
            this.showToast = false;
        },
        start() {
            console.log("长按");
            setTimeout(() => {
                this.showBool = true;
            }, 4000);
        },
    },
};
</script>

<style>
.success {
    width: 100%;
    height: 100vh;
    font-size: 14px;
    color: #3d3d3d;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.buttonGo {
    padding: 13px 36px;
    background-color: #ebad63;
    font-size: 20px;
    border: none;
    color: #ffffff;
    border-radius: 6px;
    margin-bottom: 50px;
}
.success_img {
    margin: 0 0 20px;
    width: 103px;
    height: 103px;
}
.hotlines {
    width: 343px;
    /* height: 278px; */
    background: linear-gradient(316deg, #ebad63 0%, #fce1b2 100%);
    border-radius: 20px;
    margin: 20px auto 0px;
    font-size: 18px;
    font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
    font-weight: bold;
    color: #333333;
    padding-top: 25px;
    padding-bottom: 25px;
}
.card_bg {
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.card {
    width: 161px;
    height: 161px;
    border-radius: 10px;
    border: 1px dashed #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card_img {
    width: 142px;
    height: 142px;
}
.card_t {
    font-size: 28px;
    font-weight: 600;
    margin-top: 10px;
}

.toast {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.363);
    position: fixed;
    z-index: 9999999999999999;
    left: 0;
    top: 0;
}
.toast-content {
    width: 60%;
    border-radius: 10px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #333;
    text-align: center;
    padding: 60px 10px 26px;
    box-sizing: border-box;
}
.toast-content .toast-msg {
    font-size: 20px;
    font-weight: bold;
}
.toast-content .toast-tips {
    color: #ff1b0b;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.toast-content .toast-tips img {
    width: 22px;
    height: 22px;
    display: block;
}
.toast-content .close-icon {
    width: 36px;
    height: 36px;
    border-radius: 15px;
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
}
.toast-content .close-icon img {
    width: 36px;
    height: 36px;
	display: block;
}
</style>
